<template>
    <div class="six col-sm-2" id="six-width" >
        <router-link :to="'/product/' + info.id" class="six-main">
            <img :src="info.image">
            <div class="shouye-one">{{ info.introduce }}</div>
            <div class="shouye-two">{{ info.name }}</div>
            <!-- <div class="six-color" :style="{ background: colors[info.color]}"></div> -->
            <div class="six-cost">¥ {{ info.cost }}</div>
            <!-- <div class="six-add-cart" @click.prevent="handleCart">加入购物车</div> -->
        </router-link>
    </div>
</template>
<script>
    export default {
        props: {
            info: Object
        },
        data () {
            return {
                
            }
        },
        methods: {
            handleCart () {
                this.$store.commit('addCart', this.info.id);
            }
        }
    };
</script>
<style scoped>
    .six{
        padding: 0px;
        float: left;
    }
    .six img{
        height:237px;
    }
    .six-main{
        display: block;
        margin: 8px;
        /* border: 1px solid #dddee1; */
        border-radius: 3px;
        overflow: hidden;
        background: #fff;
        /* text-align: center; */
        position: relative;
    }
    .six-main:hover{
        text-decoration: none;
    }
    .six-main img{
        width: 100%;
        padding-bottom: 8px;
    }
    .shouye-one{
        font-size: 12px !important;
        line-height: 1.33333em !important;
        font-weight: 800 !important;
        color: rgb(113, 78, 51)
    }
    .shouye-two{
        font-size: 16px;
        font-weight: 800;
        line-height: 1.375;
        color: #484848 !important;
        color: #222;
    }
    .six-main:hover h4{
        color: #0070c9;
    }
    .six-color{
        display: block;
        width: 16px;
        height: 16px;
        border: 1px solid #dddee1;
        border-radius: 50%;
        margin: 6px auto;
    }
    .six-cost{
        color: #484848 !important;
        margin-top: 6px;
        font-size: 14px !important;
        line-height: 1.28571em !important;
        font-weight: 400 !important;
    }
    .six-add-cart{
        display: none;
        padding: 4px 8px;
        background: #2d8cf0;
        color: #fff;
        font-size: 12px;
        border-radius: 3px;
        cursor: pointer;
        position: absolute;
        top: 5px;
        right: 5px;
    }
    .six-main:hover .six-add-cart{
        display: inline-block;
    }
</style>